<template>
  <view class="wrap">
    <car-info-header :carInfo="carInfo" :iconShow="true"></car-info-header>
    <view class="box">
      <view class="center-item" v-for="(info, index) in datas" :key="index">
        <view class="title flex flex-ai-c">
          <view class="left-border"></view>
          <view class="title-text flex-1 color-333 font-32"
            >{{ titleArr[index].title }}
            <text class="font-24">{{ titleArr[index].subTitle }}</text></view
          >
          <view @click="showMore(index)">
            <text class="font-24 color-999 pr-10">{{
              isShow[index] ? '收起' : '展开'
            }}</text>
            <u-icon
              :name="isShow[index] ? 'arrow-up' : 'arrow-down'"
              color="#999"
              size="24rpx"
            ></u-icon>
          </view>
        </view>
        <view class="status-box">
          <view class="status">
            <text class="status-text">
              正常
              <text class="color-3DB707">{{ info.normal }}</text
              >项
            </text>
            <text class="status-text">
              异常
              <text class="color-EB5C02">{{ info.abnormal }}</text
              >项
            </text>
            <text
              class="status-text"
              v-if="account_signature_url && qualityState === 2"
            >
              需修复
              <text class="color-EB5C02">{{ info.needRepairNum }}</text
              >项
            </text>
            <text class="status-text" v-if="qualityState !== 2">
              已修复
              <text class="color-EB5C02">{{ info.repairNum }}</text
              >项，未修复
              <text class="color-EB5C02">{{ info.noRepairNum }}</text
              >项
            </text>
            <text class="status-text" v-if="info.didNotDetect">
              未检测
              <text class="color-EB5C02">{{ info.didNotDetect }}</text
              >项
            </text>
          </view>
        </view>
        <view v-for="(item, i) in info.allList" :key="i">
          <view
            class="status-normal flex flex-jc-sb flex-ai-c color-333"
            v-if="item.detection_State === 1 && isShow[index]"
            >{{ item.car_Detection_Typedata_Name }}状况
            <i-icon
              icon="icontijiaochenggong"
              type="single"
              size="30rpx"
              color="#41CB05"
            ></i-icon>
          </view>
          <view
            class="status-normal flex flex-jc-sb flex-ai-c color-999"
            v-if="item.detection_State === 0 && isShow[index]"
            >{{ item.car_Detection_Typedata_Name }}状况
            <i-icon
              icon="iconwei"
              type="single"
              size="30rpx"
              color="#999999"
            ></i-icon>
          </view>
          <view v-if="item.detection_State === 2">
            <view class="status-abnormal">
              <!-- 未质检 -->
              <view class="item-title flex flex-ai-c" v-if="qualityState === 2">
                <view class="flex-1">
                  <text class="item-name pr-10">
                    {{ item.car_Detection_Typedata_Name }}状况
                  </text>
                  <i-icon
                    icon="icontishi"
                    type="single"
                    size="30rpx"
                    color="#EB5C02"
                  ></i-icon>
                </view>
                <view
                  v-if="account_signature_url"
                  class="flex flex-ai-c flex-jc-fe"
                >
                  <view
                    v-if="!item.client_agree"
                    class="status-right status-notneed"
                  >
                    无需修复
                  </view>
                  <view v-else class="status-right color-EB5C02">
                    需要修复
                  </view>
                  <view
                    v-if="!item.order_id && item.client_agree"
                    class="status-right status-noorder"
                    @click="selOrder(item)"
                  >
                    创建关联订单
                  </view>
                  <view
                    v-if="item.order_id && item.client_agree"
                    @click="gotoOrder(item.order_id)"
                    class="flex flex-ai-c"
                  >
                    <text class="status-right status-order">已关联订单</text>
                    <u-icon
                      name="arrow-right"
                      color="#999999"
                      size="24"
                    ></u-icon>
                  </view>
                </view>
              </view>
              <!-- 已质检 -->
              <view class="item-title flex flex-ai-c" v-else>
                <view class="flex-1">
                  <text class="item-name pr-10">
                    {{ item.car_Detection_Typedata_Name }}状况
                  </text>
                  <i-icon
                    icon="icontishi"
                    type="single"
                    size="30rpx"
                    color="#EB5C02"
                  ></i-icon>
                </view>
                <view v-if="!item.client_agree" class="status-right">
                  无需修复
                </view>
                <view
                  v-else-if="item.order_id && !item.repair_url"
                  class="status-right"
                >
                  未修复
                </view>
                <view v-else class="status-right color-EB5C02"> 需要修复 </view>
                <view
                  v-if="!item.order_id && item.client_agree"
                  class="status-right"
                >
                  未关联订单
                </view>
                <view
                  v-else-if="item.client_agree"
                  @click="gotoOrder(item.order_id)"
                  class="flex flex-ai-c"
                >
                  <text class="status-right status-order">已关联订单</text>
                  <u-icon name="arrow-right" color="#999999" size="24"></u-icon>
                </view>
              </view>
              <view class="flex flex-ai-c">
                <view style="width: 50%">
                  <text class="item-tips">{{
                    item.exceptionMsg || '异常照片'
                  }}</text>
                  <view class="item-img">
                    <image class="img" :src="item.url" mode="scaleToFill" />
                    <view class="img-tips">{{
                      item.car_Detection_Typedata_Name
                    }}</view>
                  </view>
                </view>
                <view v-if="item.repair_url">
                  <text class="item-tips2">已修复照片</text>
                  <view class="item-img">
                    <image
                      class="img"
                      :src="item.repair_url"
                      mode="scaleToFill"
                    />
                    <view class="img-tips">{{
                      item.car_Detection_Typedata_Name
                    }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="box">
      <view class="bottom-item bb-2">
        <view class="titel flex">
          <text class="flex-1 color-333 font-32">技师签字</text>
        </view>
        <view class="sign">
          <image
            class="sign-img"
            :src="technician_signature_url"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="bottom-item">
        <view class="titel flex" @click="gotoSing">
          <text class="flex-1 color-333 font-32">客户签字</text>
          <text class="color-EB5C02 font-32" v-if="!account_signature_url"
            >等待客户签字确认</text
          >
          <u-icon
            v-if="!account_signature_url"
            class="pl-10"
            name="arrow-right"
            color="#999"
            size="26rpx"
          ></u-icon>
        </view>
        <view class="sign">
          <image
            class="sign-img"
            v-if="account_signature_url"
            :src="account_signature_url"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import carInfoHeader from '@/components/afterSales/carInfoHeader'
import { dateFormat } from '../../utils/formatDate'

export default {
  data() {
    return {
      datas: [],
      technician_signature_url: '',
      account_signature_url: '',
      id: '',
      isShow: [false, false, false, false], //展开收起
      titleArr: [
        { title: '外观检查', subTitle: '（目视检查）' },
        { title: '内饰检查', subTitle: '(功能与目视检查）' },
        { title: '仪表盘检查', subTitle: '' },
        { title: '其他检查', subTitle: ' (功能与目视检查）' },
      ],
    }
  },

  computed: {
    carInfo() {
      return this.$store.state.afterSales.carInfo
    },

    qualityState() {
      return this.$store.state.afterSales.qualityState
    },
  },

  onLoad(e) {
    this.id = e.id
  },

  onShow() {
    this.getInfo()
  },

  methods: {
    dateFormat,

    getInfo() {
      uni.showLoading()
      this.$api.afterSales
        .visualCheckReport({
          order_Arrive_Store_Id: this.id,
        })
        .then((res) => {
          console.log(res.data)
          this.datas = [
            { ...res.data.appearance },
            { ...res.data.interior },
            { ...res.data.dashboard },
            { ...res.data.other },
          ]
          if (res.data.account_signature_url !== null) {
            this.account_signature_url = res.data.account_signature_url
          }
          if (res.data.technician_signature_url !== null) {
            this.technician_signature_url = res.data.technician_signature_url
          }
          uni.hideLoading()
        })
        .catch((e) => {
          console.log(e)
          uni.hideLoading()
        })
    },

    //用户签名
    gotoSing() {
      if (!this.account_signature_url) {
        this.$store.commit('afterSales/setSignData', {
          id: this.id,
          type: 0,
          figure: 1,
        })
        let datas = JSON.stringify({
          type: 'before',
          count: 2,
          fnName: 'arrvialOrderSign',
        })
        uni.navigateTo({
          url:
            '/pages_afterSales/orderConfirm/customerConfirm?typeOptions=' +
            datas,
        })
      }
    },

    showMore(i) {
      this.$set(this.isShow, i, !this.isShow[i])
    },

    //关联订单
    selOrder(data) {
      //数据格式转换
      this.$store.commit('afterSales/setOrderErrList', [
        {
          client_agree: data.client_agree,
          exceptionId: data.exceptionId,
          exceptionMsg: data.exceptionMsg,
          exceptionName: data.car_Detection_Typedata_Name + '状况',
          imgs: [data.url],
          isClientAgree: data.client_agree,
          orderId: data.order_id ? data.order_id : '',
          position: data.car_Detection_Typedata_Name,
          repairUrl: data.repair_url ? data.repair_url : '',
        },
      ])
      uni.navigateTo({
        url:
          '/pages_afterSales/selectOrder/selectOrder?id=' +
          this.id +
          '&exceptionId=' +
          data.exceptionId,
      })
    },

    //订单详情
    gotoOrder(id) {
      console.log(355)
      uni.navigateTo({
        url: '/pages_afterSales/order/orderDetail/orderDetail?id=' + id,
      })
    },
  },

  components: {
    carInfoHeader,
  },
}
</script>
<style lang="scss" scoped>
page,
.wrap {
  background: #f6f6f6;
}
.wrap {
  .box {
    background: #ffffff;
    border-radius: 10rpx;
    margin: 20rpx 24rpx 0;

    .bb-2 {
      border-bottom: 2rpx solid #eee;
    }

    .center-item {
      padding: 0 20rpx;

      .title {
        height: 88rpx;
        border-bottom: 2rpx solid #eee;

        .left-border {
          height: 30rpx;
          width: 8rpx;
          border-radius: 4rpx;
          background: #ffe23e;
          margin-right: 10rpx;
        }

        .title-text {
          font-weight: bold;
        }
      }

      .status-box {
        padding-top: 20rpx;

        .status {
          background: #f6f6f6;
          border-radius: 10rpx;
          padding: 0 20rpx;
          display: inline-block;

          .status-text {
            height: 50rpx;
            line-height: 50rpx;
            color: #999;
            padding-right: 20rpx;
            font-size: 28rpx;
            font-weight: bold;
            background: #f6f6f6;
          }
        }
      }

      .status-abnormal {
        border-bottom: 2rpx solid #eee;
        padding-bottom: 30rpx;

        .item-title {
          height: 74rpx;

          .item-name {
            padding-left: 22rpx;
            font-size: 26rpx;
            color: #333;
            font-weight: bold;
          }
        }

        .item-tips {
          display: inline-block;
          background: #fff7f7;
          color: #eb5c02;
          font-size: 24rpx;
          // height: 60rpx;
          // line-height: 60rpx;
          padding: 15rpx 16rpx;
          border-radius: 10px;
          margin-bottom: 20rpx;
          // overflow: hidden;
        }

        .item-tips2 {
          display: inline-block;
          background: #f4fef8;
          color: #3db707;
          font-size: 24rpx;
          height: 60rpx;
          line-height: 60rpx;
          padding: 0 16rpx;
          border-radius: 10px;
          margin-bottom: 20rpx;
          overflow: hidden;
        }

        .item-right {
          height: 20rpx;
          width: 98rpx;
        }

        .item-right2 {
          height: 46rpx;
          width: 150rpx;
        }

        .item-img {
          position: relative;
          width: 266rpx;
          height: 200rpx;
          border-radius: 10rpx;
          background: #e1e1e1;

          .img {
            width: 266rpx;
            height: 200rpx;
            border-radius: 10rpx;
          }

          .img-tips {
            position: absolute;
            bottom: 0;
            width: 266rpx;
            height: 50rpx;
            line-height: 50rpx;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 0px 0px 10rpx 10rpx;
            color: #fff;
            padding: 0 20rpx;
            font-size: 22rpx;
            font-weight: bold;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }

        .status-right {
          display: inline-block;
          font-size: 20rpx;
          transform: scale(0.87);
          color: #999999;
        }

        .status-noorder {
          line-height: 46rpx;
          height: 4r6px;
          background: #ffe23e;
          border-radius: 10rpx;
          color: #333;
          padding: 0 16rpx;
        }

        .color-EB5C02 {
          color: #eb5c02;
        }
      }

      .status-normal {
        height: 74rpx;
        padding-left: 22rpx;
        font-size: 26rpx;
        font-weight: bold;
        border-bottom: 2rpx solid #eee;
      }

      .fw-400 {
        font-weight: 400;
      }

      .pl-20 {
        padding-left: 20rpx;
      }

      .pr-10 {
        padding-right: 10rpx;
      }

      .pl-0 {
        padding-left: 0;
      }

      .font-20 {
        font-size: 20rpx;
      }

      .color-3DB707 {
        color: #3db707;
      }

      .color-EB5C02 {
        color: #eb5c02;
      }
    }

    .bottom-item {
      padding: 0 20rpx;
      .titel {
        padding: 20rpx 0;
      }

      .sign {
        height: 140rpx;

        .sign-img {
          height: 140rpx;
          margin-left: 150rpx;
          width: 460rpx;
        }
      }
    }
  }
}
</style>
